import React, { Component } from "react";
import {
  Space,
  Card,
  Tag,
  Row,
  Col,
  PageHeader
} from "antd";
import Header from "../../components/header";
import Footer from "../../components/footer";
import {
  TagsOutlined,
} from "@ant-design/icons";
import "braft-editor/dist/index.css";
import "braft-editor/dist/output.css";

import "./study.css";
import moment from "moment";

export default class index extends Component {
  state = {
    isLoading: false,
    course_title: "",
    course_time: "",
    tch_name: "",
    course_content:''
  };  
  componentDidMount = () => {
     this.setState({
       course_content: this.props.location.state.course_content,
       course_title: this.props.location.state.course_title,
       tch_name: this.props.location.state.tch_name,
       course_time: moment(this.props.location.state.course_time).format(
         "YYYY-MM-DD HH:mm"
       ),
     });
  };
  render() {
     
    return (
      <div>
        <div className="all-container">
          <Header />
          <div className="all-body">
            <Row justify="center">
              <Col span={15} className="comm-left">
                <div className="s-news">
                  <PageHeader
                    ghost={false}
                    onBack={() => window.history.back()}
                    title={this.state.course_title}
                    extra={this.state.course_time}
                    subTitle={this.state.tch_name}
                    style={{ backgroundColor: "#fcfcfc" }}
                  />
                  <div
                    className="braft-output-content"
                    dangerouslySetInnerHTML={{
                      __html: this.state.course_content,
                    }}
                  ></div>
                </div>
              </Col>
              <Col span={5} className="comm-right">
                <div>
                  <Card
                    title={
                      <Space>
                        <TagsOutlined />
                        热门标签
                      </Space>
                    }
                  >
                    <div className="s-tag">
                      <Tag color="magenta">人工智能</Tag>
                      <Tag color="red">机器学习</Tag>
                      <Tag color="volcano">深度学习</Tag>
                      <Tag color="orange" style={{ marginTop: ".5rem" }}>
                        NLP
                      </Tag>
                      <Tag color="gold" style={{ marginTop: ".5rem" }}>
                        目标检测
                      </Tag>
                      <Tag color="lime" style={{ marginTop: ".5rem" }}>
                        语音处理
                      </Tag>
                      <Tag color="green" style={{ marginTop: ".5rem" }}>
                        图像修复
                      </Tag>
                      <Tag color="cyan" style={{ marginTop: ".5rem" }}>
                        强化学习
                      </Tag>
                      <Tag color="blue" style={{ marginTop: ".5rem" }}>
                        智能机器人
                      </Tag>
                      <Tag color="geekblue" style={{ marginTop: ".5rem" }}>
                        语音识别
                      </Tag>
                      <Tag color="purple" style={{ marginTop: ".5rem" }}>
                        图像识别
                      </Tag>
                    </div>
                  </Card>
                </div>
              </Col>
              <Col></Col>
            </Row>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}
